<template>
    <div class="catalogue">
        <div :class="className[0]" @click="toTarget(0)">今日上新</div>
        <div :class="className[1]" @click="toTarget(1)">拼团开奖</div>
        <div :class="className[2]" @click="toTarget(2)">服饰服装</div>
        <div :class="className[3]" @click="toTarget(3)">鞋子箱包</div>
        <div :class="className[4]" @click="toTarget(4)">
            <img src="@/assets/icon/dingbu.png" alt="">
            <span>回到顶部</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Catalogue",
        data() {
            return {
                className: [
                    {
                        item: true,
                        active: true
                    },{
                        item: true,
                        active: false
                    },{
                        item: true,
                        active: false
                    },{
                        item: true,
                        active: false
                    },{
                        item: true,
                        active: false
                    },
                ]
            }
        },
        methods: {
            toTarget(index) {
                this.className = this.className.map((item,index) => {
                    return {
                        item: true,
                        active: false
                    }
                })
                this.className[index].active = true
                this.$emit("toCatalogueList", index)
            }
        }
    }
</script>

<style scoped lang="less">
    @purple: #151965;

    .catalogue {
        position: fixed;
        left: 5%;
        bottom: 100px;
        width: 100px;

        border-radius: 50px;
        background-color: #fff;
        text-align: center;
        box-shadow: 0 0 5px #ccc;

        .item {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;

            &:first-child {
                height: 60px;
                padding-top: 20px;
            }

            &:last-of-type {
                height: 110px;
                padding-bottom: 20px;
            }
            &:hover,&.active {
                cursor: pointer;
                color: @purple;
                font-weight: bold;
            }
            &:last-of-type:hover {
                color: #333;
                font-weight: normal;
            }

            img {
                width: 30px;
                height: 30px;
                margin: 20px 0 0 0;
            }

        }

    }
</style>
